<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Canvas画板</title>
  <link rel="shortcut icon" href="./src/palette-fill.svg" type="image/x-icon">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
    integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous" />
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
    crossorigin="anonymous"></script>
  <style>
    .tools {
      position: fixed;
      top: 10px;
      right: 0;
      margin-right: 10px;
      border-radius: 8px;
      padding:10px;
      /* min-width: 240px; */
      backdrop-filter: blur(4px);
      background: white;
      user-select: none;
      cursor: auto;
      transition: all ease-in-out .2s;
      box-shadow: 0 0 6px rgba(0,0,0,.12);
    }
    .tools .bi{
      cursor: pointer;
      transition: .3s ease-in-out;
    }
    .tools .bi:hover{
      transform: scale(1.2);
    }
    .toggle-switch{
      font-size: 26px;
    }
    [class*=lang-]{
      display: none;
    }
    .lang-zh {
      display: inline-block;
    }
    .setting-font{
      font-size:30px;
      color: #0075FF;
      cursor: pointer;
      transition: .4s ease-in-out all;
    }
    .f-justify{
      align-items: center;
    }
    .config{
      display: none;
    }
    .t-icon.bi-trash3:hover{
      color: #DC3545;
      cursor: pointer;
    }
    .t-icon.bi-download:hover{
      color: #28A745;
      cursor: pointer;
    }
    body{
      cursor: crosshair;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <!-- 画板区域 -->
  <canvas id="cvs"></canvas>
  <!-- 工具栏区域 -->
  <div class="tools">
    <div class="d-flex f-justify">
      <i class="bi bi-gear-fill mr-2"></i>
      <i class="bi bi-trash3 t-icon mr-2" title="清空" onclick="initCanvas()"></i>
      <i class="bi bi-download t-icon " title="下载"  onclick="canvasToImage()"></i>
    </div>
    <div class="config">
      <p class="mb-2 mt-2"><i class="bi bi-translate"></i>&nbsp;
        <span class="lang-zh">语言</span>
        <span class="lang-en">Language</span>
        <span class="lang-jp">言語</span>
      </p>
      <div class="btn-group mb-2" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-info" onclick="changeLang('en')">English</button>
        <button type="button" class="btn btn-success" onclick="changeLang('zh')">中文</button>
        <button type="button" class="btn btn-danger" onclick="changeLang('jp')">日本語</button>
      </div>
      <p class="mb-2 d-flex" style="align-items: center;"><i class="bi bi-pin-angle"></i>&nbsp;
        <span class="lang-zh">固定面板</span>
        <span class="lang-en">Secure the Panel</span>
        <span class="lang-jp">パネルを確保</span>&nbsp;
        &nbsp;
        <i class="bi bi-toggle-off toggle-switch"></i>
      </p>
      <p class="mb-2"><i class="bi bi-pencil-fill"></i>&nbsp;
        <span class="lang-zh">线条粗细</span>
        <span class="lang-en">LineWidth</span>
        <span class="lang-jp">線の太さ</span>
      </p>
      <input id="lineRange" type="range" value="2" min="1" max="10" onchange="widthChange()">
      <p class="mb-2">
        <i class="bi bi-fonts"></i>&nbsp;
        <span class="lang-zh">字体颜色</span>
        <span class="lang-en">FontColor</span>
        <span class="lang-jp">フォントの色です</span>
      </p>
      <input class="mb-2" id="fontColorPicker" type="color" value="#000000" onchange="setColor('font')" />
      <p class="mb-2">
        <i class="bi bi-palette-fill"></i>&nbsp;
        <span class="lang-zh">背景颜色</span>
        <span class="lang-en">BackgroundColor</span>
        <span class="lang-jp">背景の色</span>
      </p>
      <input class="mb-2" id="bgColorPicker" type="color" value="#ffffff" onchange="setColor('bg')" />
      <div class="d-flex">
        <button type="button" class="btn btn-danger mr-2" onclick="initCanvas()">
          <i class="bi bi-trash3"></i>&nbsp;
          <span class="lang-zh">清空</span>
          <span class="lang-en">Clear</span>
          <span class="lang-jp">空</span>
        </button>
        <button type="button" class="btn btn-success" onclick="canvasToImage()">
          <i class="bi bi-download"></i>&nbsp;
          <span class="lang-zh">下载</span>
          <span class="lang-en">Download</span>
          <span class="lang-jp">ダウンロード</span>
        </button>
      </div>
    </div>
  </div>
  <div id="modal-1" class="modal fade" tabindex="-1" data-bac>
    <div class="modal-dialog modal-sm  modal-dialog-centered">
      <div class="modal-content" >
        <div class="modal-header">
          <div class="modal-title">提示</div>
          <button class="close" data-dismiss="modal">×</button>
        </div>
        <div class="modal-body">
          确定要更换背景颜色吗?
        </div>
        <div class="modal-footer">
          <button type="button" onclick="resetChange()" class="btn btn-danger" data-dismiss="modal">取消</button>
          <button type="button" onclick="resetBg()" class="btn btn-success" data-dismiss="modal">确定</button>
        </div>
      </div>
    </div>
  </div>
  <script src="./src/js/index.js"></script>
</body>

</html>